<template>
  <view class="page">
    <view class="order">
      <view class="top_info">
        <!-- 适配状态栏 -->
        <view class="status_bar"></view>
        <view class="flex top_title flex_col_center">
          <uni-icons type="back" size="24" @click="leftClick"></uni-icons>
          <text class="name">退货单</text>
        </view>

        <u-tabs
          :list="stateList"
          :current="tabIndex"
          @change="change"
          bg-color="#F8F9FA"
          inactive-color="#666666"
          active-color="#40AE36"
          class="tabs"
          font-size="26"
          item-width="20%"
        ></u-tabs>
      </view>
      <view class="all_order">
        <div class="scroll_height">
          <view
            class="sign_order"
            v-for="(item, index) in dataList"
            @click="toDetail(item.id)"
            :key="index"
          >
            <!-- v-for="item in dataList" -->
            <my-returnorderlist
              :item="item"
              :tabIndex="tabIndex"
              @clickbtn="btnAction"
            ></my-returnorderlist>
          </view>
        </div>
        <view class="nodata" v-if="dataList.length == 0">
          <image :src="nodataImg" mode="aspectFit"></image>
          <view>暂时还没有此类订单~</view>
        </view>
      </view>
    </view>
    <u-select
      v-model="show"
      :list="userList"
      @confirm="selectUser"
      value-name="id"
      label-name="nickname"
    >
      <text class="custom-icon custom-icon-yonghu"></text>
    </u-select>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      nodataImg: getApp().globalData.nodataImg,
      show: false,
      tabIndex: 0, //0: 全部 1:待审核2: 待退款3: 已完成4: 已取消
      stateList: [
        {
          name: "全部",
        },
        {
          name: "待审核",
        },
        {
          name: "待退款",
        },
        {
          name: "已完成",
        },
        {
          name: "已取消",
        },
      ],
      userList: [], //用户列表
      userInfo: {
        userId: "", //选择的用户id
        userName: null, //选择的用户名
      },
      dataList: [],
      count: null,
      page: 1,
    };
  },
  onReady() {
    getApp().setTitle();
  },
  onLoad() {
    this.getData(1);
  },
  methods: {
    getData(page, change) {
      if (page == 1) {
        this.dataList = [];
        this.count = null;
      }
      var params = {
        size: 10,
        page: page,
      };
      if (this.tabIndex > 0) {
        let status = 0;
        switch (this.tabIndex) {
          case 1: {
            status = 0;
            break;
          }
          case 2: {
            status = 2;
            break;
          }
          case 3: {
            status = 3;
            break;
          }
          case 4: {
            status = 4;
            break;
          }
        }
        Object.assign(params, {
          status,
        });
      }
      if (this.userInfo.userId) {
        Object.assign(params, {
          zid: this.userInfo.userId,
        });
      }
      $https("GET", "orderReturnList", params, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data.list;
          for (let i in list) {
            var ms1 = Number(list[i].created_at + "000");
            list[i].createdTime = this.timestampToDate(ms1);
            if (list[i].check_time) {
              var ms2 = Number(list[i].check_time + "000");
              list[i].checkTime = this.timestampToDate(ms2);
            }
          }
          if (change) {
            this.dataList = list;
          } else {
            this.dataList = this.dataList.concat(list);
          }
          // console.log("dataList", this.dataList, change);

          this.count = res.data.data.count;
          this.page = page;
          this.userList = res.data.data.zi_list ? res.data.data.zi_list : [];
          if (!this.userInfo.userId && this.userList.length > 0) {
            this.userInfo.userName = res.data.data.zi_list[0].nickname;
          }

          console.log("this.dataList", this.dataList);
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    timestampToDate(ms) {
      var now = new Date();
      now.setTime(ms);
      var date =
        now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
      return date;
    },
    change(index) {
      // console.log("index", index);
      this.tabIndex = index;
      this.dataList = [];
      this.count = null;
      this.page = 1;
      this.getData(1);
    },
    //选择用户
    selectUser(data) {
      // console.log("data", data);
      this.userInfo.userId =
        data[0].value == this.userList[0].id ? null : data[0].value;
      this.userInfo.userName = data[0].label;
      this.getData(1, true);
    },

    //按钮事件
    btnAction(option) {
      var type = option.type,
        id = option.id,
        msg = option.msg;
      uni.showModal({
        content: `是否${msg}`,
        confirmColor: "#4FA388",
        success: (res) => {
          if (res.confirm) {
            $https("GET", type, { id: id }, (res) => {
              if (res.data.errcode == 0) {
                this.getData(1);
              } else {
                uni.showToast({
                  title: res.data.errmsg,
                  icon: "none",
                });
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    toDetail(id) {
      uni.navigateTo({
        url: `/pages/user/return_goods/return_goods_detail?id=${id}`,
      });
    },
    leftClick() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    var page = this.page;
    if (this.dataList.length < this.count) {
      page++;
      this.getData(page);
    }
  },
  watch: {
    // 'userInfo.userId':function(newval,oldval){
    // 	if(oldval && newval!=oldval){
    // 		this.getData(1)
    // 	}
    // }
  },
};
</script>

<style lang="scss" scoped>
.order .top_info .top_title {
  justify-content: flex-start;
  padding: 0rpx 34rpx 0rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #e1e1e1;
  background: #fff;
  color: black;
  font-weight: bold;
  position: relative;

  .name {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.order {
  .top_info {
    width: 100%;
    z-index: 99;
    position: fixed;
    background: #f8f9fa;
    // #ifdef APP-PLUS
    top: var(--status-bar-height);
    // #endif
    .tabs {
      // padding: 0 36rpx;
    }
  }

  .all_order {
    padding-top: 200rpx;
    // #ifdef APP-PLUS
    padding-top: calc(200rpx + var(--status-bar-height));
    // #endif
    margin-bottom: 20rpx;
    background: #f8f9fa;
  }

  .success_pay {
    position: absolute;
    font-size: 92rpx;
    color: rgba(255, 0, 0, 0.1);
    transform: rotate(-22deg);
    margin-top: 40rpx;
  }

  .sign_order {
    background: $white;
    margin: 0rpx 30rpx;
    padding: 30rpx;
    border-radius: 20rpx;

    image {
      width: 112rpx;
      height: 80rpx;
      margin-right: 22rpx;
    }

    .order_number {
      border-bottom: 1px solid #ececec;
    }

    .order_info {
      flex-basis: 100%;

      > view {
        margin: 10rpx 0;
      }
    }
  }

  .sign_order:nth-child(n + 2) {
    margin-top: 20rpx;
  }

  //   .scroll_height {
  //     height: calc(100vh - 50px - 318rpx);
  //     /* #ifdef APP-PLUS */
  //     height: calc(100vh - 50px - 245rpx - var(--status-bar-height));
  //     /* #endif */
  //   }

  .select_button {
    padding: 26rpx 0;

    .another_order,
    .confirm_pay {
      border-color: #55a68c;
      color: #55a68c;
    }

    .look_logist,
    .cancel_order {
      color: #8f8f8f;
    }

    .confirm_good {
      color: #e53131;
    }
  }

  .select_button > text {
    border: 1px solid;
    padding: 8rpx 22rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    border-radius: 24rpx;
  }
}

.top_title {
  .icon_user {
    width: 26rpx;
    height: 30rpx;
  }

  .icon_right {
    width: 12rpx;
    height: 16rpx;
    margin-left: 10rpx;
  }

  .account {
    margin-left: 10rpx;
  }
}
</style>
